<div class="summary-row">
  <div>
    <h4>{{ 'General Info' | translate }}</h4>

    <div class="summary-item">
      <div class="label">{{ 'Pool Name' | translate }}</div>
      <div class="value">{{ state.name || ('Not Set' | translate) }}</div>
    </div>

    @if (state.encryption) {
      <div class="summary-item">
        <div class="label">{{ 'Encryption' | translate }}</div>
        <div class="value">{{ state.encryption }}</div>
      </div>
    }
  </div>
</div>
<div class="summary-row">
  <div class="summary-group topology-summary">
    <h4>{{ 'Topology Summary' | translate }}</h4>

    @for (category of nonEmptyTopologyCategories; track category[0]) {
      <div class="summary-item">
        <div class="label">
          {{ category[0] | mapValue: vdevTypeLabels | translate }}
        </div>
        <div class="value">
          {{ category[1] | ixTopologyCategoryDescription: !isLimitedToOneLayout(category[0]) : category[0] === vDevType.Spare }}
        </div>
      </div>
    } @empty {
      {{ 'No VDEVs added.' | translate }}
    }
  </div>

  <div class="summary-group">
    <h4>{{ 'Details' | translate }}</h4>

    <div class="summary-item">
      <div class="label">{{ 'Est. Usable Raw Capacity' | translate }}</div>
      <div class="value">{{ (totalCapacity$ | async) | ixFileSize }}</div>
    </div>

    @if (state.enclosureSettings.maximizeEnclosureDispersal || limitToEnclosureName) {
      <div class="summary-item">
        <div class="label">{{ 'Dispersal Strategy' | translate }}</div>
        <div class="value">
          @if (state.enclosureSettings.maximizeEnclosureDispersal) {
            {{ 'Maximize Dispersal' | translate }}
          }
          @if (limitToEnclosureName) {
            {{ 'Limit To {name} Enclosure' | translate: { name: limitToEnclosureName } }}
          }
        </div>
      </div>
    }
  </div>
</div>
<div class="summary-row">
  @if (poolCreationErrors.length) {
    <div>
      <h4>{{ 'Warnings' | translate }}</h4>
      @for (error of poolCreationErrors; track error.severity + error.text) {
        <div>
          <div [class]="[error.severity, 'summary-item']">
            {{ error.text }}
          </div>
        </div>
      }
    </div>
  }
</div>

<div class="step-buttons">
  <button
    mat-button
    matStepperPrevious
    color="accent"
    type="button"
    ixTest="back-review"
  >
    {{ 'Back' | translate }}
  </button>

  @if (hasVdevs) {
    <button
      mat-button
      type="button"
      ixTest="inspect-vdevs"
      (click)="onInspectVdevsPressed()"
    >{{ 'Inspect VDEVs' | translate }}</button>
  }

  @if (showStartOver) {
    <button
      mat-button
      matStepperNext
      color="error"
      type="button"
      ixTest="start-over"
      (click)="startOver()"
    >
      {{ 'Start Over' | translate }}
    </button>
  }

  <button
    *ixRequiresRoles="[Role.PoolWrite]"
    mat-button
    matStepperNext
    color="primary"
    type="button"
    ixTest="create-pool"
    [disabled]="isCreateDisabled"
    (click)="createPool.emit()"
  >
    {{ isAddingVdevs() ? ('Update Pool' | translate) : ('Create Pool' | translate) }}
  </button>
</div>
